<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		
		.container {
			width: 361px;
			padding: 20px;
			border: 1px solid #ccc;
			margin: 50px auto;
		}
		
		.content {
			max-height: 65px;
			overflow: hidden;
			transition: max-height 0.5s;
		}
		
		
		.btn {
			display: flex;
			width: 40px;
			color: cornflowerblue;
			outline: none;
			border: none;
			background-color: transparent;
		}
	
	
	
	</style>
</head>
<body>
<div class="container">
	<div class="content">
		<div class="text-content">
			Perseverance is defined as the quality of hanging on and never giving up, despite difficulties and obstacles. It is this unwavering determination that helps us overcome challenges and achieve our goals. However, perseverance is not the same as stubbornness or doggedness. It requires a balance between persistence and adaptability, learning from failures and adjustments to changing circumstances.
			
			The benefits of perseverance are numerous. Firstly, it builds character. Persevering through hardships teaches us resilience, courage, and determination. It molds us into stronger, more confident individuals who are not afraid to face difficulties head-on.
		</div>
	</div>
	<button class="btn">展开</button>
</div>
</body>
<script>
	const maxHeight=65
	const btn = document.querySelector('.btn')
	const content = document.querySelector('.content')
	const textContent=document.querySelector('.text-content')
	const textHeight=textContent.getBoundingClientRect().height // 文本高度
	const contentHeight=content.getBoundingClientRect().height  // 容器高度
	let flag = false
	if (textHeight < maxHeight) {
		btn.style.display = 'none'
	}
	btn.addEventListener('click', () => {
		if (!flag) {
			content.style.maxHeight=textHeight+'px'
			btn.innerHTML = '收起'
			flag = true
		} else {
			content.style.maxHeight=contentHeight+'px'
			btn.innerHTML = '展开'
			flag = false
		}
	})



</script>
</html>